<template>
    <div class="mergeTable">
      <el-card>
        <p>业务场景</p>
        <p>根据不同的字段进行单元格合并</p>
      </el-card>
       <template>
         <el-table
           :span-method="cellMerge"
           border
           size="small"
           :row-class-name="rowClassName"
           @cell-mouse-enter="handleMouseEnter"
           @cell-mouse-leave="handleMouseLeave"
           :data="table"
           style="width: 100%">
           <el-table-column
             align="center"
             prop="province"
             label="省">
           </el-table-column>
           <el-table-column
             align="center"
             prop="city"
             label="市">
           </el-table-column>
           <el-table-column
             align="center"
             prop="zone"
             label="区">
           </el-table-column>
           <el-table-column
             header-align="center"
             prop="remake"
             label="备注">
           </el-table-column>
           <el-table-column
             align="center"
             prop="publicSubsidy"
             label="国补">
           </el-table-column>
           <el-table-column
             align="center"
             prop="provinceSubsidy"
             label="省补">
           </el-table-column>
           <el-table-column
             align="center"
             prop="citySubsidy"
             label="市补"
             fixed="right">
           </el-table-column>
           <div slot="empty" class="table-empty" v-if="state === 0">
<!--             <img src="../../assets/img/empty.png" alt="">-->
             <p>暂无数据</p>
           </div>
           <div slot="empty" class="table-empty"  v-if="state === 1">
<!--             <img src="../../assets/img/errData.png" alt="">-->
             <p>查询数据错误</p>
           </div>
         </el-table>
       </template>
    </div>
</template>

<script>
export default {
  name: 'MergeTable',
  data () {
    return {
      table: [],
      table1: [
        {
          'province': '浙江省',
          'city': '杭州市',
          'zone': '余杭区',
          'type': 'ICBC',
          'remake': '2017-2018年期间建成并网的分布式光伏',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.1',
          'citySubsidy': '0.1'
        },
        {
          'province': '浙江省',
          'city': '杭州市',
          'zone': '余杭区',
          'type': 'DWE',
          'remake': '对居民住宅单独建设的光伏发电项目',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.1',
          'citySubsidy': '0.'
        },
        {
          'province': '浙江省',
          'city': '杭州市',
          'zone': '萧山区',
          'type': 'DWE',
          'remake': '对居民住宅单独建设的光伏发电项目',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.1',
          'citySubsidy': '0.'
        },
        {
          'province': '安徽省',
          'city': '阜阳市',
          'zone': '太和县',
          'type': 'ALL',
          'remake': '对居民住宅单独建设的光伏发电项目',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.2',
          'citySubsidy': '0.1'
        },
        {
          'province': '安徽省',
          'city': '合肥市',
          'zone': '蜀山区',
          'type': 'ALL',
          'remake': '对居民住宅单独建设的光伏发电项目',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.2',
          'citySubsidy': '0.1'
        },
        {
          'province': '安徽省',
          'city': '合肥市',
          'zone': '庐阳区',
          'type': 'ALL',
          'remake': '对居民住宅单独建设的光伏发电项目',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.2',
          'citySubsidy': '0.1'
        },
        {
          'province': '浙江省',
          'city': '杭州市',
          'zone': '西湖区',
          'type': 'ALL',
          'remake': '2017-2018年期间建成并网的分布式光伏',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.1',
          'citySubsidy': '0.2'
        },
        {
          'province': '浙江省',
          'city': '嘉兴市',
          'zone': '海盐县',
          'type': 'ALL',
          'remake': '对居民住宅单独建设的光伏发电项目',
          'publicSubsidy': '0.37',
          'provinceSubsidy': '0.2',
          'citySubsidy': '0.1'
        }
      ],
      provinceArr: [], // 省份要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除
      provincePos: 0, // 省份要合并数组内容的序号
      cityArr: [], // 同上 市
      cityPos: [],
      zoneArr: [], // 同上 区
      zonePos: [],
      cellIndex: -1,
      state: 0
    }
  },
  created () {
    // 模拟
    this.table = this.table1
    this.getSpanArr(this.table)
  },
  methods: {
    getSpanArr (data) {
      let order = 1
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.provinceArr.push(1)
          this.provincePos = 0

          // // 为了鼠标移出移入统一样式
          data[i].order = order

          this.cityArr.push(1)
          this.cityPos = 0
          this.zoneArr.push(1)
          this.zonePos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].province === data[i - 1].province) {
            this.provinceArr[this.provincePos] += 1
            this.provinceArr.push(0)
            data[i].order = data[i - 1]['order']
          } else {
            this.provinceArr.push(1)
            this.provincePos = i
            data[i]['order'] = order + 1
            order++
          }
          // // 市级
          if (data[i].city === data[i - 1].city) {
            this.cityArr[this.cityPos] += 1
            this.cityArr.push(0)
          } else {
            this.cityArr.push(1)
            this.cityPos = i
          }
          // // 区
          if (data[i].zone === data[i - 1].zone) {
            this.zoneArr[this.zonePos] += 1
            this.zoneArr.push(0)
          } else {
            this.zoneArr.push(1)
            this.zonePos = i
          }
        }
        this.table = data
        // console.log(this.table)
      }
    },
    handleTable (data) {
      var order = 1
      data.forEach((item, i, arr) => {
        if (i === 0) {
          arr[i].order = order
        } else {
          if (arr[i].province === arr[i - 1].province) {
            arr[i].order = arr[i - 1]['order']
          } else {
            arr[i]['order'] = order + 1
            order++
          }
        }
      })
      this.table = data
      console.log(this.table)
    },
    cellMerge ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.provinceArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else if (columnIndex === 1) {
        const _row1 = this.cityArr[rowIndex]
        const _col1 = _row1 > 0 ? 1 : 0
        return {
          rowspan: _row1,
          colspan: _col1
        }
      } else if (columnIndex === 2) {
        const _row2 = this.zoneArr[rowIndex]
        const _col2 = _row2 > 0 ? 1 : 0
        return {
          rowspan: _row2,
          colspan: _col2
        }
      }
    },

    // 鼠标进入单元格
    handleMouseEnter (row, column, cell, event) {
      console.log(row, column)
      this.table.forEach((item) => {
        if (row.order === item.order) {
          this.cellIndex = row.order
        }
      })
    },
    // 给相应的rowIndex添加类名
    rowClassName ({ row, rowIndex }) {
      console.log('=====' + rowIndex)
      // console.log(row, rowIndex);
      let r = -1
      if (this.cellIndex === row.order) {
        r = rowIndex
      }
      // this.table.forEach((item) => {
      //   if (this.cellIndex === row.order) {
      //     r = rowIndex;
      //   }
      // });
      if (rowIndex === r) {
        return 'hover-row'
      }
    },
    // 鼠标离开
    handleMouseLeave (row, column, cell, event) {
      this.cellIndex = -1
    }
  }
}
</script>

<style scoped>

</style>
